<!-- 
 @Author: LW   
 @Date: 2020-12-10 09:05:28   
 @function: 登录页面
 -->
<template>
  <div class="login-container">
    <div class="loginbox">
      <el-form
        :model="loginForm"
        :rules="formInfoRules"
        status-icon
        ref="loginFormRef"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-page"
      >
        <img src="@/assets/images/login/logo.png" class="logo" alt="" />
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            auto-complete="off"
            placeholder="用户名"
          >
            <i
              slot="prefix"
              class="iconfont iconzhanghao fontsize"
              :class="loginForm.username == '' ? '' : 'iconactive'"
            ></i
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            auto-complete="off"
            placeholder="密码"
          >
            <i
              slot="prefix"
              class="iconfont iconmima fontsize"
              :class="loginForm.password == '' ? '' : 'iconactive'"
            ></i
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="validatecode">
              <el-input
                type="validatecode"
                v-model="loginForm.validatecode"
                auto-complete="off"
                placeholder="验证码"
                @keyup.enter.native="handleSubmit"
                maxlength="4"
                minlength="4"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="code-box">
            <img :src="imgUrl" alt class="codeimg" @click="getValidateCode()" />
          </el-col>
        </el-row>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%" @click="handleSubmit" :loading="logining"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//引用对象
import LoginHttp from "@/api/initial/login";
import md5 from 'js-md5';

//定义变量
const { login, loadValidateCode } = LoginHttp;
export default {
  data() {
    return {
      logining: false,
      imgUrl: null,
      //表单对象，由Form结尾
      loginForm: {
        username: "",
        password: "",
        validatecode: null
      },
      //验证对象，由Rules结尾
      formInfoRules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        validatecode: [{required: true, min: 4, max: 4, message: "验证码长度为4", trigger: "blur"}]
      },
      checked: false
    };
  },
  /**
   * html加载完成之前，执行。执行顺序：父组件-子组件
   */
  created() {},
  /**
   * 页面初始化方法[html加载完成后执行。执行顺序：子组件-父组件]
   */
  mounted() {
    //获取验证码
    this.getValidateCode();
  },
  methods: {
    //获取验证码
    getValidateCode() {
      loadValidateCode({
        uniqueIdentifier: this.$store.state.user.uniqueIdentifier
      }).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.imgUrl = "data:image/jpg;base64," + data.FileContents;
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //点击登录
    handleSubmit(event) {
      this.logining = false;
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          var par = {
            name: this.loginForm.username,
            password: md5(this.loginForm.password),
            appSecret: this.$store.state.config.appSecret,
            vialdcode: this.loginForm.validatecode,
            uniqueIdentifier: this.$store.state.user.uniqueIdentifier
          };
          login(par).then(response => {
            let data = response.data;
            if (data.Code === 1000) {
              this.$store.dispatch("user/login", data.Data);
              this.logining = true;
              //登录成功后返回的信息赋值
              //this.$router.push({ path: "/entrance" });
              this.$router.push({ path: "/home" });
            } else {
              this.$messageTip.warning(data.Msg); 
            }
          });
        } else {
          console.log("提交错误");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
@import "../../assets/css/login/index.scss";
</style>
